<template>
  <g class="player">
    <g
      v-for="([k, v]) in playerStore.players"
      :key="v.id + '_' + k"
    >
      <Tank
        :key="v.id"
        v-if="v.hp > 0"
        :direction="v.direction"
        :shape="v.shape"
        :color="v.color"
        :x="v.x"
        :y="v.y"
      />
      <Protection
        v-if="v.protection"
        :key="protectionStore.protections.get(v.role).id"
        :index="protectionStore.protections.get(v.role).index"
        :transform="`translate(${v.x}, ${v.y})`"
      />
    </g>
  </g>
</template>

<script setup>
  import Tank from './Tank.vue'
  import Protection from './Protection.vue'
  import { usePlayerStore } from '@/store/player'
  import { useProtectionStore } from '@/store/protection'

  const playerStore = usePlayerStore()
  const protectionStore = useProtectionStore()
</script>

<style lang="scss" scoped>

</style>